<template>
  <CommonCard title="今日交易用户数" value="182,425">
    <div ref="todayUsersRef" style="width:100%;height:100%"></div>
    <template #footer>
      <span>退货率</span>
      <span class="emphasis">5.91%</span>
    </template>
  </CommonCard>
</template>

<script lang="ts">
import CommonCard from "./CommonCard.vue";
export default {
  name: "TodayUsers",
  components: {
    CommonCard,
  },
};
</script>

<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import * as echarts from 'echarts';
import type { EChartsType } from 'echarts'

// 定义一个ref 关联到页面中的ref标签上面
const todayUsersRef = ref()
let chart:EChartsType

const getOption = ()=>{
  return {
    xAxis:{
      show:false,
      data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] // x轴数据列表
    },
    yAxis:{
      // 不显示y轴的内容
      show:false
    },
    // 图片再坐标中显示的位置
    grid:{
    left:0,
    right:0,
    },
    // 鼠标放上去有提示
    tooltip:{
    trigger:'axis',
    confine:true
    },
    series:[
      {
        type: 'bar',
        // 列表数据
        // data: orderTrend.value,
        data: [44, 126, 55, 88, 133, 99, 33, 113, 63, 98, 77, 123],
      },
    ],

  }
}

onMounted(()=>{
  chart = echarts.init(todayUsersRef.value)
  chart.setOption(getOption())

  window.addEventListener('resize',()=>{
    chart && chart.resize
  })
})

</script>

<style>
</style>